<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		div {
			width: 300px;
			height: 300px;
			background-color: hotpink;
			padding: 20px;
			border: 15px solid green;
			box-sizing: content-box;
			/* 盒子默认box-sizing 取值是content-box */
			/* 盒子的大小会被padding和border撑开 */
		}

		p {
			width: 300px;
			height: 300px;
			background-color: hotpink;
			padding: 20px;
			border: 15px solid green;
			box-sizing: border-box;
			/* 盒子的大小不会有任何变化 */
		}
	</style>
</head>

<body>
	<h1>学到这里在以后的开发中可以额外加一条初始化语句即:box-sizing:border-box; 这样在任何标签里添加border或者padiing都不用在担心撑大盒子了</h1>
	<h2>在之前的盒子模型里，如果给盒子设置了边框或者padding值则会撑大盒子，而在新的盒子模型属性里解决了这个问题</h2>
	<h1>新增一个box-sizing属性有两个值</h1>
	<ul>
		<li>content-box 盒子大小:width + padding + border</li>
		<li>border-box 盒子大小:就是width</li>
	</ul>
	<div>小猪</div>
	<br>
	<p>这个盒子更方便</p>
	<h2>实际上在使用中自动减去了padding和border的宽度</h2>
</body>

</html>